<template>
  <div class="hello">
		<img src="../assets/logo.png">
    <h1>{{ msg }}</h1>
    <ul>
      <li>
				<el-button @click="handleTest">功能测试</el-button>
      </li>
      <li>
				<el-button @click="handleInvalidateSession">session注销</el-button>
      </li>
			<li>
				<el-button @click="handleGetSessionStorage">getSessionStorage</el-button>
			</li>
			<li>
				<el-button @click="handleClearSessionStorage">clearSessionStorage</el-button>
			</li>
			<li>
				<el-button @click="handleGetVuexStore">Vuex-store</el-button>
			</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
	
	methods:{
		handleTest: function(){
			this.$axios.get('/api/hello')
					.then(res => {
						//请求成功-业务正常处理返回
						if(res.data.success){
							this.$message({type:'success',message:res.data.result})
						}else{
							//请求成功-业务异常
							//已拦截响应，错误弹窗，这里可以添加具体业务异常后操作..
							//this.$message({type:'success',message:'111'})
						}
				})
		},
		
		//注销session
		handleInvalidateSession: function(){
			this.$axios.get('/api/invalidateSession')
					.then(res => {
						//请求成功-业务正常处理返回
						if(res.data.success){
							this.$message({type:'success',message:'操作成功！'})
						}else{
							//请求成功-业务异常
							//已拦截响应，错误弹窗，这里可以添加具体业务异常后操作..
						}
				})
		},
		
		//sessionStorage 数据
		handleGetSessionStorage: function(){
			console.log(sessionStorage.getItem('username'), sessionStorage.getItem('nickname'))
		},
		
		//清除 sessionStorage
		handleClearSessionStorage: function(){
			sessionStorage.clear()
		},
		
		//
		handleGetVuexStore: function(){
			console.log('>> Vuex-store', this.$store.state)
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
